<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_XTBqL0',
'ZY_BingChengGongJiangJingShen_1',
'ZY_TiGongQuanFangWeiQing_2',
'ZY_XinXingGaoQiangXiTu_3',
'ZY_GongSiGaiKuang_4',
'ZY_AnHuiZhongYuanXinCai_5',
'ZY_LeJieGengDuo_6',
'img_cbbqA7',
'img_ZxAu08',
'ZY_TeSeChanPin_9',
'ZY_LvKangHeJin_10',
'img_iqGuR11',
'ZY_GaoQiangDuDiMi_12',
'g_13',
'ZY_14_14',
'ZY_15_15',
'ZY_HanJieXingNeng_16',
'ZY_HanJieXiShu_17',
'ZY_18_18',
'ZY_ZheSeXingNeng_19',
'ZY_YangJiYangHuaWei_20',
'ZY_21_21',
'ZY_NaiFuShiXing_22',
'ZY_JingJianFuShiJi_23',
'ZY_24_24',
'ZY_JiaGongXingNeng_25',
'ZY_JiYaXiShu_26',
'ZY_LeJieGengDuo_27',
'img_edx4u28',
'ZY_XingYeYingYong_29',
'ZY_HangKongHangTian_30',
'ZY_JunGongXingYe_31',
'ZY_QiCheQingLiangHua_32',
'ZY_YunDongQiCai_33',
'ZY_YingErTuiChe_34',
'img_VB2c$35',
'img__K3tY36',
'img_Cc_f537',
'img_Gqzgt38',
'img__Jduw39',
'img_qu$6540',
'img_kKdGY41',
'img_jwIq642',
'img_oXoJ043',
'img_T2BuE44',
'img_Rzeki45',
'img_rR1hp46',
'img_oMdIt47',
'img_Sp9T$48',
'img_uIb7U49',
'img_Hswau50',
'img_IVaNL51',
'ZY_GuoJunBiaoRenZheng_52',
'img_byunE53',
'img_j4dmp54',
'img_OEm3t55',
'img_OO4li56',
'img_C61EK57',
'ZY_XinWenZhongXin_58',
'ZY_LeJieGengDuo_59',
'img_AHDQu60',
'img_w48LZ61',
'ZY_HuNanJiaTuoXinCai_62',
'ZY_AnHuiZhongYuanXinCai_63',
'ZY_64_64',
'img_Jp3u665',
'img_nB8kI66',
'ZY_HuNanJiaTuoXinCai_67',
'ZY_AnHuiZhongYuanXinCai_68',
'ZY_69_69',
'img_axDr$70',
'img_Q8YtT71',
'ZY_HuNanJiaTuoXinCai_72',
'ZY_AnHuiZhongYuanXinCai_73',
'ZY_74_74',
'img_zOpnC75'
"  ></cms:ads>
<!doctype html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1,"> 
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>湖南佳拓新材料有限公司官网${网页标题}</title> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxc/pc/css/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxc/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxc/pc/css/common.css">
  <style>.box{ padding: 90px 0; } .box-bg1{ background-color: #F8FBFF; } .box .content-left{ width: 40%; } .box .content-left h3{ font-size: 36px; margin-bottom: 20px; } .box .content-left p{ font-size: 18px; color: #6D7074; line-height: 30px; text-indent: 2em; } .box .content-right{ width: 45%; } .box .content-right img{ width: 100%; } .box-bg3{ background: url(https://hwfile.csxuncong.com/jkxc/pc/images/industry-application.png) no-repeat; background-size: 100% 100%; } .box .industry-application .item-right{ width: 80%; position: relative; overflow: hidden; overflow-x: auto; } .box .industry-application .item-right::-webkit-scrollbar { display: none; } .box .industry-application .item-right .item img { display: block; width: 300px; height: 250px; margin-right: 20px; } .box .industry-application .item-left li{ font-size: 22px; padding: 24px 50px; background: #EEEEEE; text-align: center; margin-top: 10px; } .box .industry-application .item-left li:first-child{ margin-top: 0; } .box .industry-application .item-left .active{ background: #0F62C8; color: #FFFFFF; } .box .featured-products{ position: relative; margin: 260px 0 100px; } .box .featured-products .spot{ width: 16px; height: 16px; border-radius: 50%; background: #0F62C8; } .box .featured-products span{ font-size: 80px; margin-right: 10px; } .box .featured-products h5{ font-size: 22px; font-weight: bold; } .box .featured-products p{ font-size: 16px; color: #6D7074; margin-top: 15px; } .box .featured-products .item:nth-child(2){ position: relative; top: -320px; left: -570px; } .box .featured-products .item:nth-child(2) .performance{ width: 220px; position: absolute; right: -110px; top: -75px; } .box .featured-products .item:nth-child(2) .line{ width: 100px; height: 70px; box-sizing: border-box; border-top: 1px dashed #6D7074; border-right: 1px dashed #6D7074; position: absolute; top: -14px; right: -139px; } .box .featured-products .item:nth-child(2) .spot{ position: absolute; bottom: -75px; left: 130px; } .box .featured-products .item:nth-child(3){ position: relative; top: -264px; left: -260px; } .box .featured-products .item:nth-child(3) .performance{ position: absolute; right: -370px; top: -130px; } .box .featured-products .item:nth-child(3) .line{ width: 100px; height: 70px; box-sizing: border-box; border-top: 1px dashed #6D7074; border-left: 1px dashed #6D7074; position: absolute; top: -70px; right: -100px; } .box .featured-products .item:nth-child(3) .spot{ position: absolute; bottom: -20px; left: -8px; } .box .featured-products .item:nth-child(4){ position: relative; top: -96px; left: 15px; } .box .featured-products .item:nth-child(4) .performance{ position: absolute; right: -320px; top: -60px; } .box .featured-products .item:nth-child(4) .line{ width: 100px; box-sizing: border-box; border-top: 1px dashed #6D7074; position: absolute; top: 11px; right: -110px; } .box .featured-products .item:nth-child(4) .spot{ position: absolute; bottom: -20px; left: -8px; } .box .featured-products .item:nth-child(5){ position: relative; top: 96px; left: 15px; } .box .featured-products .item:nth-child(5) .performance{ position: absolute; right: -395px; top: -44px; } .box .featured-products .item:nth-child(5) .line{ width: 100px; box-sizing: border-box; border-bottom: 1px dashed #6D7074; border-left: 1px dashed #6D7074; position: absolute; top: 11px; right: -110px; } .box .featured-products .item:nth-child(5) .spot{ position: absolute; bottom: -20px; left: -8px; } .box .featured-products .item:last-child{ position: relative; top: -15px; left: -695px; } .box .featured-products .item:last-child .performance{ width: 270px; position: absolute; right: 105px; top: -32px; } .box .featured-products .item:last-child .line{ width: 100px; box-sizing: border-box; border-top: 1px dashed #6D7074; border-left: 1px dashed #6D7074; position: absolute; top: 11px; right: 11px; } .box .featured-products .item:last-child .spot{ position: absolute; bottom: -20px; left: -8px; } .box .featured-products .item:last-child h5{ text-align: right; } .box .featured-products .img-box{ width: 680px; height: 480px; } .box .featured-products .img-box .img{ width: 100%; height: 100%; } .box-bg4{ background: url(https://hwfile.csxuncong.com/jkxc/pc/images/authenticationBg.png) no-repeat; background-size: 100% 100%; } .box .new-title{ text-align: center; font-size: 36px; } .box .news{ margin-top: 60px; margin-left: -10px; margin-right: -10px; } .box .news .item{ width: 33.3%; box-sizing: border-box; padding: 0 10px; } .box .news .item .item-content{ padding: 30px 20px; box-sizing: border-box; } .box .news .item img{ width: 100%; display: block; } .box .news .item .img{ height: 230px; } .box .news .item-content h4{ font-size: 22px; margin-bottom: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .box .news .item-content span{ font-size: 18px; line-height: 30px; } .box .news .item-content div{ margin-top: 30px; } .box .news .item-content div p{ font-size: 20px; } .box .news .item-content div img{ width: 30px; } .box .news .item:hover .item-content{ background: #0F62C8; color: #FFFFFF; } .box .news .item:hover .item-content div img{ content: url(https://hwfile.csxuncong.com/jkxc/pc/images/right-white.png); } .box .certificate-warp .img:nth-child(5){ width: 13%; position: absolute; top: 225px; left: 940px; } .learn-more{ margin-top: 20px; }</style>
  <meta name="keywords" content="湖南佳拓新材料有限公司">
  <meta name="description" content="湖南佳拓新材料有限公司">
 </head> 
 <body> 
  <jsp:include page="_topWithBanner.jsp"></jsp:include>
  <div class="box box-bg1"> 
   <div class="container flex align-center space-between"> 
    <div class="content-left wow animated fadeInLeftSmall" data-wow-delay="0s"> 
     <h3 class="zy" data-type="ad" data-id="${ZY_GongSiGaiKuang_4.adId}">${ZY_GongSiGaiKuang_4.adTitle}</h3> 
     <p class="zy" data-type="ad" data-id="${ZY_AnHuiZhongYuanXinCai_5.adId}">${ZY_AnHuiZhongYuanXinCai_5.adTitle}</p> 
     <a href="${path }/do/redirect/pc/companyProfile">
      <div class="learn-more"> 
       <span class="mr-5 zy" data-type="ad" data-id="${ZY_LeJieGengDuo_6.adId}">${ZY_LeJieGengDuo_6.adTitle}</span> 
       <img src="${img_cbbqA7.adImg}" class="zy" data-type="ad" data-id="${img_cbbqA7.adId}"> 
      </div> </a> 
    </div> 
    <div class="content-right wow animated fadeInRightSmall" data-wow-delay="0.2s"> 
     <img src="${img_ZxAu08.adImg}" class="zy" data-type="ad" data-id="${img_ZxAu08.adId}"> 
    </div> 
   </div> 
  </div> 
  <div class="box"> 
   <div class="container flex flex-column align-center space-center"> 
    <h2 class="title animated wow slideInDown zy" data-type="ad" data-id="${ZY_TeSeChanPin_9.adId}">${ZY_TeSeChanPin_9.adTitle}</h2> 
    <p class="sub-title animated wow slideInDown zy" style="font-size: 28px;">${img_iqGuR11.adTitle}</p>
    <div class="featured-products flex align-center space-center animated wow fadeInUpA" data-wow-delay="0s"> 
	 <div class="img-box">
		<img src="${img_iqGuR11.adImg}" class="zy img" data-type="ad" data-id="${img_iqGuR11.adId}">	
	 </div>
     <div class="item"> 
      <div class="spot"></div> 
      <div class="line"></div> 
      <div class="performance flex align-center"> 
       <div> 
        <h5 class="zy" data-type="ad" data-id="${ZY_GaoQiangDuDiMi_12.adId}">${ZY_GaoQiangDuDiMi_12.adTitle}</h5>
        <p class="zy">${ZY_GaoQiangDuDiMi_12.adInfo2}</p>
       </div> 
       <span class="zy" data-type="ad" data-id="${ZY_14_14.adId}">${ZY_14_14.adTitle}</span>
      </div> 
     </div> 
     <div class="item"> 
      <div class="spot"></div> 
      <div class="line"></div> 
      <div class="performance flex align-center"> 
       <span class="zy" data-type="ad" data-id="${ZY_15_15.adId}">${ZY_15_15.adTitle}</span> 
       <div> 
        <h5 class="zy" data-type="ad" data-id="${ZY_HanJieXingNeng_16.adId}">${ZY_HanJieXingNeng_16.adTitle}</h5> 
        <p class="zy">${ZY_HanJieXingNeng_16.adInfo2}</p>
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="spot"></div> 
      <div class="line"></div> 
      <div class="performance flex align-center"> 
       <span class="zy" data-type="ad" data-id="${ZY_18_18.adId}">${ZY_18_18.adTitle}</span> 
       <div> 
        <h5 class="zy" data-type="ad" data-id="${ZY_ZheSeXingNeng_19.adId}">${ZY_ZheSeXingNeng_19.adTitle}</h5> 
        <p class="zy" data-type="ad">${ZY_ZheSeXingNeng_19.adInfo2}</p>
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="spot"></div> 
      <div class="line"></div> 
      <div class="performance flex align-center"> 
       <span class="zy" data-type="ad" data-id="${ZY_21_21.adId}">${ZY_21_21.adTitle}</span> 
       <div> 
        <h5 class="zy" data-type="ad" data-id="${ZY_NaiFuShiXing_22.adId}">${ZY_NaiFuShiXing_22.adTitle}</h5> 
        <p class="zy">${ZY_NaiFuShiXing_22.adInfo2}</p>
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="spot"></div> 
      <div class="line"></div> 
      <div class="performance flex align-center"> 
       <div> 
        <h5 class="zy" data-type="ad" data-id="${ZY_JiaGongXingNeng_25.adId}">${ZY_JiaGongXingNeng_25.adTitle}</h5> 
        <p class="zy">${ZY_JiaGongXingNeng_25.adInfo2}</p>
       </div>
	   <span class="zy" data-type="ad" data-id="${ZY_24_24.adId}">${ZY_24_24.adTitle}</span> 
      </div> 
     </div> 
    </div> 
    <a href="${path }/do/redirect/pc/featuredProducts">
     <div class="learn-more animated wow fadeInUp" data-wow-delay="0.2s"> 
      <span class="mr-5 zy" data-type="ad" data-id="${ZY_LeJieGengDuo_27.adId}">${ZY_LeJieGengDuo_27.adTitle}</span> 
      <img src="${img_edx4u28.adImg}" class="zy" data-type="ad" data-id="${img_edx4u28.adId}"> 
     </div> </a> 
   </div> 
  </div> 
  <div class="box box-bg3"> 
   <div class="container"> 
    <h2 class="title zy" data-type="ad" data-id="${ZY_XingYeYingYong_29.adId}">${ZY_XingYeYingYong_29.adTitle}</h2> 
    <div class="industry-application flex align-center space-between"> 
     <ul id="applicationLift" class="item-left animated wow fadeInLeftSmall" data-wow-delay="0s">
      <cms:artType code="hyyy" var="artTypeList"></cms:artType>
      <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
       <li class="${status.index == 0  ? 'active' : ''}" >${artType.artTypeName}</li>
      </c:forEach>
     </ul>
     <div class="item-right animated wow fadeInRightSmall" data-wow-delay="0s"> 
      <div id="applicationRight">
       <cms:artType code="hyyy" var="artTypeList"></cms:artType>
       <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
       <div class="${status.index == 0 ? 'item flex align-center' : 'item flex align-center none'}">
        <cms:arts code="${artType.code}" var="artsList"></cms:arts>
        <c:forEach items="${artsList }" var="art" varStatus="status" >
         <a href="${path }/do/redirect/pc/productDetail?id=${art.artId}"><img src="${art.artImage}" class="zy" /></a>
        </c:forEach>
       </div>
       </c:forEach>
      </div>
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="box box-bg4"> 
   <div class="container"> 
    <h2 class="title animated wow slideInDown zy" data-type="ad" data-id="${ZY_GuoJunBiaoRenZheng_52.adId}">${ZY_GuoJunBiaoRenZheng_52.adTitle}</h2> 
    <div class="certificate-warp flex align-center space-center"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0s" src="${img_byunE53.adImg}" data-type="ad" data-id="${img_byunE53.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.2s" src="${img_j4dmp54.adImg}" data-type="ad" data-id="${img_j4dmp54.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.4s" src="${img_OEm3t55.adImg}" data-type="ad" data-id="${img_OEm3t55.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.6s" src="${img_OO4li56.adImg}" data-type="ad" data-id="${img_OO4li56.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.8s" src="${img_C61EK57.adImg}" data-type="ad" data-id="${img_C61EK57.adId}"> 
    </div> 
   </div> 
  </div> 
  <div class="box"> 
   <div class="container">
    <div class="flex align-center space-between"> 
     <h2 class="new-title wow animated fadeInLeftSmall zy" data-wow-delay="0s" data-type="ad" data-id="${ZY_XinWenZhongXin_58.adId}">${ZY_XinWenZhongXin_58.adTitle}</h2> 
     <a href="${path }/do/redirect/pc/news">
      <div class="learn-more wow animated fadeInRightSmall" data-wow-delay="0.2s"> 
       <span class="mr-5 zy" data-type="ad" data-id="${ZY_LeJieGengDuo_59.adId}">${ZY_LeJieGengDuo_59.adTitle}</span> 
       <img src="${img_AHDQu60.adImg}" class="zy" data-type="ad" data-id="${img_AHDQu60.adId}"> 
      </div> </a> 
    </div>
    <cms:arts var="xwzxList" code="xwzx" pageNow="0" pageSize="3"></cms:arts>
    <div class="news flex">
     <c:forEach items="${xwzxList }" var="news" varStatus="status" >
     <div class="item wow animated fadeInUpA" data-wow-delay="0s">
      <a href="${path }/do/redirect/pc/newsDetail?id=${news.artId}">
       <img src="${news.artImage}" class="img zy">
       <div class="item-content"> 
        <h4 class="zy">${news.artTitle}</h4>
        <span class="zy">${news.artAbstract}</span>
        <div class="flex align-center space-between"> 
         <p class="zy" data-type="ad" data-id="${ZY_64_64.adId}">${ZY_64_64.adTitle}</p> 
         <img src="${img_Jp3u665.adImg}" class="zy" data-type="ad" data-id="${img_Jp3u665.adId}"> 
        </div> 
       </div> </a> 
     </div>
     </c:forEach>
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://hwfile.csxuncong.com/jkxc/pc/js/swiper-bundle.min.js"></script>
  <script src="https://hwfile.csxuncong.com/jkxc/pc/js/wow.min.js"></script>
  <script>
		var itemEls = document.getElementsByClassName('nav-item-hover');
		for(var i= 0; i < itemEls.length;i++){
		    itemEls[i].onmouseover = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'block'
					img[0].src = 'https://hwfile.csxuncong.com/jkxc/pc/images/fangxiang-shang.png'
		        };
		    }
		    itemEls[i].onmouseout = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'none'
					img[0].src = 'https://hwfile.csxuncong.com/jkxc/pc/images/fangxiang-xia.png'
		        };
		    }
		}
		
		
        var swiper = new Swiper('.banner .mySwiper', {
            loop:false,
			slidesPerView:1,
            autoplay : true,
            pagination: {
				el: ".swiper-pagination",
				type: "bullets",
            },
        });
		
		var header=document.getElementById('applicationLift').children;
		var content=document.getElementById('applicationRight').children;
		for(var i=0;i<content.length;i++){
			//存储i的值  相当于oul的第一个子元素等于con的第一个子元素  (通俗来说就是一一对应)
			header[i].index=i;
			//循环设置点击事件
			header[i].onmouseover=function(){
				for(var i=0;i<content.length;i++){
					content[i].style.display="none";
					header[i].className = ''
				}
				//this指的是事件前的对象  (ali[i].index=i)
				content[this.index].style.display='flex';
				header[this.index].className = 'active'
			}
		}
		
		var wow = new WOW({
		    boxClass: 'wow',
		    animateClass: 'animated',
		    offset: 0,
		    mobile: true,
		    live: true
		});
		wow.init();
    </script> 
 </body>
</html>